<template>
  <div class="inline-block input-image-box text-c" >
    <i v-if="url" class="icon icon-delete color-danger pointer" @click="deleteImg"></i>
    <input
      class="input-image"
      accept="image/*"
      type="file"
      @change="updatePicture"
      :style="{'width':width+'px','height':height+'px'}" 
    />
    <i class="icon icon-shangchuan color-9" :style="{'width':width+'px','height':height+'px','line-height':height-2+'px','font-size':height/2+'px'}"></i>
    <img :src="url" v-if="url" class="image-show" :style="{'width':width+'px','height':height+'px'}" />
  </div>
</template>

<script>
export default {
  name: "SvgIcon",
  props: {
    url: {},
    ID:{
      require: true //唯一标识
    },
    width: {
      type: String,
      default: '112'
    },
    height: {
      type: String,
      default: '112'
    },
  },
  methods: {
    updatePicture(event) {
      console.log(event);
      this.$emit("change", event);
    },
    deleteImg(){
      this.$emit("deletePicture", this.ID);
    }
  },
};
</script>

<style scoped lang="less">
.input-image-box {
  position: relative;
  vertical-align:top;
  .icon-delete {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 4;
    font-size: 35px;
  }
  .icon-shangchuan {
    background-color: #eee;
  }
  .image-show {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
  
  }
  .input-image {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
}
</style>
